<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>instance</title>
  <script src="/vue.js"></script>
</head>
<body>
  <div id="root">
    <div id="title">{{title}}</div>
    <button v-on:click="msg = 'def'">show</button>
    <!-- <gp20></gp20> -->
  </div>

  <!-- <div id="app">
    <div>{{msg}}</div>
  </div> -->
  <script>
    // var gp20 = {
    //   template: `
    //     <div>gp20</div>
    //   `
    // }

    const data = {
      title: 'hello',
      msg: 'abc'
    }

    // 冻结了data的响应式特性
    // Object.freeze(data)

    var vm = new Vue({
      // reactive
      // 如果想在第一次的时候就要渲染数据，需要在data定义
      // 如果不定义，或者在vm上定义，需要重新渲染页面
      el: '#root',
      data,
      methods: {
        handleClick() {
          console.log(this.msg)
        }
      },
      // components: {
      //   gp20
      // }
    })

    // 不推荐
    // SPA: single page application
    // MPA: multiple page application
    // var vm2 = new Vue({
    //   el: '#app',
    //   data: {
    //     msg: 'world'
    //   }
    // })

    // 如何监测一个变量的值发生了变化？
    // var o = {
    //   b: 0
    // }
    // var bValue = 38
    // Object.defineProperty(o, "b", {
    //   // 使用了方法名称缩写（ES2015 特性）
    //   // 下面两个缩写等价于：
    //   // get : function() { return bValue; },
    //   // set : function(newValue) { bValue = newValue; },
    //   get() { return bValue },
    //   set(newValue) { 
    //     document.querySelector('#title').innerHTML = newValue
    //     bValue = newValue
    //   }
    // })



  </script>
</body>
</html>